<template>
  <div class="Arouter">
     <div id="Arouter_head">
	  <div id="back_fare" v-on:touchstart="back_JgSeek()">  
		 <span class="glyphicon glyphicon-menu-left"></span>
	  </div>
	  <span  id="head_title">发起路线</span>
	</div>
	<div id="Arouter_main">
	   <div class="bg">
	      <img src="static/imgs/arouter_bg.png"/>
	   </div>
       <div id="Arouter_content">
	      
			<ul class="line_address">
				<li class="home_address">
				    <p></p>
					<span>家庭地址</span>
					<input id="home_focus" type="text" readonly="true" v-on:touchstart="home_focus()">
				</li>
				<li class="company_address no-border">
				<p></p>
					<span>公司地址</span>
					<input id="company_address" type="text" name="" readonly="true" v-on:touchstart="company_address()">
				</li>
			</ul>
			<ul class="line_time">
				<li class="go_time">
				     <p></p>
					<span>上班时间</span>
					<input id="time_picker1" type="text" value="" placeholder="(选填)" readonly="true" name="" >
				</li>
				<li class="off_time ">
				    <p></p>
					<span>下班时间</span>
					<input id="time_picker2" type="text" value=""  placeholder="(选填)" readonly="true" name="" >
				</li>
			</ul>
	   </div>	   
	</div>
	<div id="Arouter_footer">
	    <span>提交信息</span>
	</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      
    }
  },
 
  methods:{
       back_JgSeek(){
	       this.$router.push({
		     path:"/Jgseek"
		   })
	   },
	   home_focus(){
	       this.$router.push({
		      path:"/ArouterSeek"
		   })
	   },
	   company_address(){
	          this.$router.push({
		      path:"/ArouterSeek"
		   })
	   }
  }
}
</script>

<style scoped>
.Arouter{
      background:#eceff4;
	  width:100%;
	  height:100vh;
	  position:fixed;
	  z-index:99;
   }
   #Arouter_head{ 
           width:100%;
	       height:8vh;
           background:#ffffff;		   
		   position:fixed;
		   line-height:8vh;
           text-align:center;
		  
		 }
 #back_fare{
    width:10vw;
	height:9vh;
	float:left;
	font-size:1.6rem;
	color:#7a7a7a;
	font-size:3rem;
}
#head_title{
        color:#7a7a7a;
		font-size: 1.6rem;
		margin-right:10vw;
		
		}
#Arouter_main{
      width:100%;
	  height:82vh;
	  margin-top:8vh;
    }		
.bg{
   width:100%;
   height:40%;
}
.bg img{
    width:100%;
}
#Arouter_content{
   width:100%;
   height:40%;
   display:flex;
   flex-direction:column;
   justify-content:center;
   align-items:center;
}
#Arouter_content ul{
      background:#ffffff;
      width:96%;
	  height:49%;
	  margin:0;
	  border-radius:5px;
	   display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
    }
#Arouter_content ul:nth-child(2){
    margin-top:2%;
}
#Arouter_content span{
  
   width:22%;
   display:block;
    height:100%;
	display:flex;
      justify-content:center;
      align-items:center;
}
#Arouter_content p{
       margin-top:1%;
       width:5%;
	   height:29%;
       background-size: 20px 137.5px;
     background-image: url(../assets/organizeline_0.5_z_81f700b.png);
	
}
.home_address p{
     background-position:-5px -38px;
}
.company_address p{
     background-position:-5px -54.5px;
}
.go_time p{
     background-position:-5px -71px;
}
.off_time p{
     background-position:-5px -87.5px;
}
#Arouter_content input{
   width:65%;
   height:40%;
   border:none;
}
#Arouter_content li{
   width:94%;
   height:50%;
    
	  display:flex;
      
      align-items:center;
}
#Arouter_content ul li:nth-child(2){
   border-top:1px solid #f1f1f1;
}

#Arouter_footer{
   width:100%;
   height:10vh;
   
   display:flex;
      justify-content:center;
      align-items:center;
}
#Arouter_footer span{
    width:95%;
	height:70%;
	background:#cccccc;
	border-radius:8px;
	font-size:1.6rem;
	display:flex;
      justify-content:center;
      align-items:center;
	  color:#ffffff;
}
</style>
